@for $i from 1 through 50 {
  .m-#{$i} {
    margin: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
  .p-#{$i} {
    padding: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
  .fs-#{$i}{
    font-size: #{$i}px;
  }
  .lh-#{$i}{
    line-height: #{$i}px;
  }
}
@for $i from 1 through 5 {
	.line-#{$i} {
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == 1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
	}
}
$fontWeightArr:400 500 600 700;
@each $i in $fontWeightArr {
  .fw-#{$i}{
    font-weight: $i;
  }
}
$display:(block, inline-block, inline, flex, inline-flex, grid, inline-grid, table, table-row, table-cell, none);
@each $i in $display {
  .d-#{$i}{
    display:$i;
  }
}
$textLayout: left right center;
@each $i in $textLayout{
  .text-#{$i}{
    text-align: $i;
  }
}
$position: static fixed absolute relative sticky;
@each $i in $position {
  .#{$i}{
    position: $i;
  }
}
$justify-content: flex-start flex-end center space-between space-around;
@each $i in $justify-content {
  .justify-#{$i}{
    justify-content: $i;
  }
}
$align-items: stretch flex-start flex-end center baseline;
@each $i in $align-items {
  .items-#{$i}{
    align-items: $i;
  }
}
$flex-wrap: nowrap wrap wrap-reverse;
@each $i in $flex-wrap {
  .flex-#{$i}{
    flex-wrap: $i;
  }
}
$flex-direction: row row-reverse column column-reverse;
@each $i in $flex-direction {
  .flex-#{$i}{
    flex-direction: $i;
  }
}
$zIndex:(-10,-1,0,10,20,30,40,50,100,200,300,400,500,600,700,800,900,1000);
@each $i in $zIndex {
  .z-#{$i}{
    z-index: $i;
  }
}
$top:(0,10,20,30,40,50,100,200,300,400,500,600,700,800,900,1000);
@each $i in $top {
  .top-#{$i}{
    top: #{$i}px;
  }
  .left-#{$i}{
    left: #{$i}px;
  }
  .right-#{$i}{
    right: #{$i}px;
  }
  .bottom-#{$i}{
    bottom: #{$i}px;
  }
}
$top2:(half:'50%', full:'100%');
@each $key,$value in $top2 {
  .top-#{$key}{
    top: #{$value};
  }
  .left-#{$key}{
    left: #{$value};
  }
  .right-#{$key}{
    right: #{$value};
  }
  .bottom-#{$key}{
    bottom: #{$value};
  }
}
@for $i from 1 through 12 {
  .z-#{$i}{
    z-index: $i;
  }
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}